CSS Lists

همانطور که در قسمت list در html گفته شد لیست ها برای منو و سایر بخش های طراحی استفاده میشود.میتوانیم با css این لیست ها را تغییر دهیم.توسط  list-style-type میتوانیم شکل یک لیست را تغییر دهیم.مثال زیر را امتحان کنید

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

 

به صورت زیر میتوانیم شکل اول لیست ها را طبق عکس تعیین کنیم

ul {
  list-style-image: url('sqpurple.gif');
}

 

مثال زیر را امتحان کنید

<!DOCTYPE html>
<html>
<head>
<style>
ol {
 background: #ff9999;
 padding: 20px;
}
ul {
 background: #3399ff;
 padding: 20px;
}
ol li {
 background: #ffe5e5;
 padding: 5px;
 margin-left: 35px;
}
ul li {
 background: #cce5ff;
 margin: 5px;
}
</style>
</head>
<body>
<h1>Styling Lists With Colors</h1>
<ol>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Coca Cola</li>
</ol>
<ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Coca Cola</li>
</ul>
</body>
</html>

 

 

 

 

 

css-text (جلسه قبل)
جداول CSS Tables (جلسه بعد)

دوره های اخیر